<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>

    <script src="../../jquery-3.1.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        body,html{
            background: #eee;
        }
        .wrap{
            margin: 50px auto;
            width:400px;

        }
        .wrap thead{

            background: #404040;
        }
        .wrap th{
            width:65px;
            border:1px solid black;
            text-align: center;
            color:white;
        }
        button{
            padding: 5px;
            margin: 5px;
        }
        .mask{
            position: fixed;
            top:0;
            width:100%;
            height:100%;
            background: rgba(0,0,0,0.7);
            left:0;
            display: none;

        }
        .mask table{
            width:700px;
            heigh:750px;
            background: white;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);

        }
        .mask table tr{
            margin: 10px 20px;
            display: inline-block;
        }
        .mask table tr td{
            width:300px;
            /*border:1px solid;*/
            text-align: center;
        }
        .mask table tr td input{
            width:150px;
            float:right;
            height:30px;
            border:1px sandybrown solid;
        }
        .mask table tr td span{
            /*background: #eee;*/
            display: inline-block;
            width:100px ;
            height:50px;
            font-size: 20px;
            color:red;
        }
    </style>
</head>
<body>
<div class="wrap">
    <button class="add">添加图书</button>
    <button class="refresh">刷新</button>
    <table class="tb">
        <thead>
            <th><input type="checkbox"></th>
            <th>图书</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>价格</th>
            <th>操作</th>
        </thead>


    </table>
    <div class="mask">
        <table>
            <tr  style="background: deepskyblue">
                <td ><h2>添加书籍</h2></td>
                <td><span class="close"><h2>X</h2></span></td>
            </tr>
            <tr>
                <td>书名 <input type="text" name="bookname"></td>
                <td>ISBN <input type="text" name="booknumber"></td>
            </tr>
            <tr>
                <td>副标题 <input type="text" name=""></td>
                <td>上架时间 <input type="text" name="booktime"></td>
            </tr>
            <tr>
                <td>价格 <input type="text" name="bookprice"></td>
                <td>出版时间 <input type="text"></td>
            </tr>
            <tr>
                <td>会员价<input type="text" name="VIP"></td>
                <td>开本 <input type="text"></td>
            </tr>
            <tr>
                <td>校园价 <input type="text"></td>
                <td>页数 <input type="text"></td>
            </tr>
            <tr>
                <td>评价 <input type="text"></td>
                <td>版本 <input type="text"></td>
            </tr>
            <tr>
                <td>作者 <input type="text" name="bookauthor"></td>
                <td>分页 <input type="text"></td>
            </tr>
            <tr>
                <td>出版社 <input type="text" name="bookpublish"></td>
                <td>图片 <input type="text" name="bookimage"></td>
            </tr>
            <tr>
                <td>
                    <button id="addBook">添加</button>
                </td>
            </tr>
        </table>
    </div>
</div>

</body>
<script>

    var xhr=new XMLHttpRequest();
    var baseUrl="localhost:6500/books";
    xhr.open('get','http://localhost:6500/books');
    xhr.send(null);
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status>=200&&xhr.status==300){
               createList(JSON.parse(xhr.responseText));
            }
        }
    };
var tb=document.querySelector(".tb");

    //创建表格，并把后台获取的数据一一对应添加
    function createList(data){
        for(var i=0;i<data.length;i++){
            var tr=document.createElement('tr');
            var td1=document.createElement('td');
            var td2=document.createElement('td');
            var td3=document.createElement('td');
            var td4=document.createElement('td');
            var td5=document.createElement('td');
            var td6=document.createElement('td');
            var td7=document.createElement('td');
            var check=document.createElement('input');
            var img=document.createElement('img');
            img.style.width='30px';
            check.setAttribute('type','checkbox');
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            tr.appendChild(td5);
            tr.appendChild(td6);
            tr.appendChild(td7);
            tb.appendChild(tr);
            td1.appendChild(check);
            td2.appendChild(img);
                img.src=data[i]['bookimage'];
                td3.textContent=data[i]['bookname'];
                td4.textContent=data[i]['bookauthor'];
                td5.textContent=ata[i['bookpublish']];
                td6.textContent=data[i]['bookprice'];
                var a1=document.createElement('a');
                td7.appendChild(a1);
                a1.innerHTML='删除';
                a1.setAttribute('data-id',data[i]['id']);
                var a2=document.createElement('a');
                td7.appendChild(a2);
                a2.innerHTML='修改';
                a2.setAttribute('data-id',data[i]['id']);
                a2.onclick=updateHandle;
                a1.onclick=deleteHamdle;

        }
    }

//添加数据按钮点击添加按钮，模态框显示
    //
    $('.add').click(function(){
        $('.mask').show();
    })
    //点击模态框影藏
    $('.mask .close').click(function(){
        $('.mask').hide();
    })
    $('table ').click(function(e){
        var ev=e||window.event;
        ev.stopPropagation();
    })
    //数据添加
    var mask=document.querySelector('.mask');
    var inputlist=mask.getElementsByTagName('input');
    console.log(inputlist.value);
    $('#addBook').click(function(){
        $('.mask').hide();

        for(var i=0;i<inputlist.length;i++){
            if(inputlist[i].value==""){
                window.alert("请将信息填写完整");
                return;
            }
        }
        xhr.open('post','http://localhost:6500/books');
        xhr.setRequestHeader('Content-type','application/json');
        var obj={};
        for(var j=0;j<inputlist.length;j++){
            obj[inputlist[j].getAttribute('name')]=inputlist.value;

        }
        xhr.send(JSON.stringify(obj));
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status>=200&&xhr.status==300){

                }
            }
        }
    })
    //修改
    function updateHandle(){
        $('.mask').show();
        var id=this.getAttribute("data-id");
        xhr.open("get","http://localhost:6500/books/"+id);
        xhr.send(null);
        var t=this;
        $('#addBook').attr('data-id',id);
        $('#addBook').onclick=updateHandles;
        xhr.onreadystatechane=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    var data=null;
                    data=JSON.parse(xhr.responseText);
                    for(var a=0;a<inputlist.length;a++){
                        var atName=inputlist[a].getAttribute("name");
                        inputlist[a].setAttribute("value",data[atName]);
                    }
                }
            }
        }
    }


function updateHandles(){
        xhr.open("put",baseUrl+"/"+this.getAttribute("data-id"));
        xhr.setRequestHeader("Content-Type","application/json");
        var obj={};
        obj.id=this.getAttribute("data-id");
        for(var i=0;i<inputlist.length;i++){
            obj[inputlist[i].getAttribute("name")]=inputlist[i].value;

        }
        xhr.send(JSON.stringify(obj));
        xhr.onreadystatechane=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    $('.mask').hide();
                }
            }
        }
}


//删除
    function deleteHandle(){
        xhr.open("delete", baseUrl + "/" + this.getAttribute('data-id'));
        xhr.setRequestHeader("Content-Type","application/json");	//设置请求传递数据的类型
        var obj = {};
        obj.id = this.getAttribute('data-id');
        xhr.send(JSON.stringify(obj));
        var t = this;
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                    t.parentNode.parentNode.remove();
                }
            }
        };
    }






















//    $.get("http://localhost:6500/books",function(data){
////        console.log(data)
//        var tr=$('<tr></tr>');
//        var td=$('<td></td>');
//        var input=$('<input type="checkbox">');
//        input.appendTo(td);
//        td.appendTo(tr);
//        tr.appendTo($(".tbody"));
//
//    })


</script>
</html>